<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推荐文章列表</title>
</head>

<body>
    <div id="recommend">
        <!-- 签到 -->
        <div id="sign">
            <ul>
                <li>
                    <button v-if="!signInInfo.isSignIn" class="ui basic button" @click="sign">签到</button>
                    <button v-else class="ui basic button">已签</button>
                </li>
                <li>
                    <div class="ui basic button">
                        最长连续签到{{signInInfo.maxContinuous}}次
                    </div>
                </li>
                <li>
                    <div class="ui basic button">
                        累计签到{{signInInfo.count}}次
                    </div>
                </li>
            </ul>
        </div>
        <my-article v-for="article in articles" :article="article"></my-article>
        <!-- 获取更多推荐 -->
        <div class="center">
            <button class="ui basic button" @click="more">
                <i class="sync alternate icon"></i>
                更多推荐
            </button>
        </div>
    </div>
    <script src="/js/recommend.js"></script>
    <link rel="stylesheet" href="/css/recommend.css">
    
</body>

</html>